/**
*@author       wuwg
*@createTime   2018/03/20
*@updateTime   2018/04/03
*@description
*@rule
 */
@import "../../../config/config.less";
@import "../form-item/form-item.less";

@css-prefix-checkbox: ~"@{css-prefix}checkbox";

.checkbox-group-error(~"@{css-prefix-form-item}");

.@{css-prefix-checkbox}-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  font-size: @font-size-small;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  padding: 10px 0;
  text-align: left;
  &-disabled{
    cursor: @cursor-disabled;
  }

  .@{css-prefix-checkbox}-inner {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    top: 0;
    left: 0;
    vertical-align:top;
    border: 1px solid @border-color-base;
    border-radius: 2px;
    background-color: #fff;
    transition: border-color @transition-time @ease-in-out, background-color @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
    &:hover {
      border-color: #bcbcbc;
    }
    &-focus {
      box-shadow: 0 0 0 2px fade(@primary-color, 20%);
      z-index: 1;
    }
  }

  .@{css-prefix-checkbox}-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;

    &[disabled]{
      cursor: @cursor-disabled;
    }

    &+span {
      display: inline-block;
      height: 14px;
      margin-right: 4px;
      line-height: 14px;
      vertical-align: middle;
    }
  }

  // 选中状态
  &-checked {
    .@{css-prefix-checkbox}-inner {
      border-color: @primary-color;
      background-color: @primary-color;
      &:after {
        content: '';
        display: table;
        width: 4px;
        height: 8px;
        position: absolute;
        top: 1px;
        left: 4px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1);
        transition: all @transition-time @ease-in-out;
      }
    }
  }

  &-indeterminate {
    .@{css-prefix-checkbox}-inner {
      background-color: @primary-color;
      border-color: @primary-color;
      &:after {
        content: '';
        width: 8px;
        height: 1px;
        transform: scale(1);
        position: absolute;
        left: 2px;
        top: 5px;
        display: table;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transition: all @transition-time @ease-in-out;
      }
    }
  }

  // 禁用状态
  &-disabled {
    .@{css-prefix-checkbox}-inner {
      border-color: @border-color-base;
      background-color: #f3f3f3;
      &:after {
        animation-name: none;
        border-color: #f3f3f3;
      }
    }
    .@{css-prefix-checkbox}-input {
      & + span {
        color: #ccc;
        cursor: @cursor-disabled;
      }
    }
  }

  &-disabled&-checked {
    .@{css-prefix-checkbox}-inner {
      &:after {
        border-color: #ccc;
      }
    }
  }

  &-indeterminate&-disabled {
    .@{css-prefix-checkbox}-inner {
      &:after {
        border-color: @input-placeholder-color;
      }
    }
  }
}

.@{css-prefix-checkbox}-group-wrapper {
  font-size: @font-size-base;
  border-radius: @btn-border-radius;
  text-align: left;
}

.checkbox-group-error(@class){
    .@{class}-error{
        .@{css-prefix-checkbox}-group-wrapper {
            border: 1px solid @error-color !important;
        }
    }
}
